<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-1">
                <eleme-filled />
            </el-icon>
            Kube-Aliee
        </span>
        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <fold v-if="$store.state.asideWidth == '250px'" />
            <Expand v-else />
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="icon-btn" @click="handleRefresh">
                <refresh />
            </el-icon>
        </el-tooltip>
        <!-- <el-menu :default-active="activeCluster" v-model:selectedKeys="selectedKeys1" mode="horizontal" class="menu"
            style="background-color: transparent;" background-color="rgb(79 70 229)" text-color="#fff">
            <el-menu-item v-for="(cluster) in clusters" :key="cluster" class="menu-item"
                @click="clusterChange(cluster)">
                {{ cluster }}
            </el-menu-item>
        </el-menu> -->

        <!-- <el-menu :default-active="activeCluster" v-model:selectedKeys="selectedKeys1" mode="horizontal" class="menu"
            style="background-color: transparent;" background-color="rgb(79 70 229)" text-color="#fff">
            <el-submenu>
                <template slot="title">我的工作台</template>
                <el-menu-item v-for="(cluster) in clusters" :key="cluster" class="menu-item"
                    @click="clusterChange(cluster)" index="2-1">
                    {{ cluster }}
                </el-menu-item>
        </el-submenu>
        </el-menu> -->

        <el-menu v-model:selectedKeys="selectedKeys1" mode="horizontal" class="menu"
            style="background-color: transparent;" background-color="rgb(79 70 229)" text-color="#fff" title="选择集群">
            <el-menu-item v-for="(cluster) in clusters" :key="cluster" class="menu-item"
                @click="clusterChange(cluster)">
                {{ cluster }}
            </el-menu-item>
        </el-menu>


        <!-- <div>
            <el-radio-group  v-for="(cluster, index) in clusters" v-model="radio1">
                <el-radio-button @select="handleSelect" label="上海">{{ cluster.name }}</el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
        </div> -->
        <div class="ml-auto flex items-center">
            <el-tooltip effect="dark" content="全屏" placement="bottom">
                <el-icon class="icon-btn" @click="toggle">
                    <full-screen v-if="!isFullscreen" />
                    <aim v-else />
                </el-icon>
            </el-tooltip>

            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex items-center text-light-50">
                    <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input v-model="form.oldpassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
        </el-form>
    </form-drawer>

</template>
<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { useFullscreen } from '@vueuse/core'
import { useRepassword,useLogout } from "~/composables/useManager"
import { ref,reactive,onBeforeMount } from "vue"
import store from "~/store"
import {
    setClusterNum,
    setCluster,
    getCluster,
    removeClusterNum
} from '~/composables/clustersList'
import { router } from "~/router"
import { getClusterList } from '~/api/clusterList'
import { toast } from '~/composables/util'

const selectedKeys1 = ref([])

// 集群数据
const clusters = ref([]);



// 默认选中的集群
// const activeCluster = ref(clusters.value[0]);

// 处理菜单选择事件
// const handleSelect = (index) => {
//   activeCluster.value = index;
//   // 这里可以根据需要将集群信息传递给当前页面的其他组件
//   const selectedCluster = clusters.value.find(cluster => cluster.name === index);
//   console.log('选择的集群信息：', selectedCluster);
// };
const {
    // 是否全屏状态
    isFullscreen,
    // 切换全屏
    toggle
} = useFullscreen()

const {
    formDrawerRef,
    form,
    rules,
    formRef,
    onSubmit,
    openRePasswordForm
} = useRepassword()

const {
    handleLogout
} = useLogout()

const handleCommand = (c) => {
    switch (c) {
        case "logout":
            handleLogout()
            break;
        case "rePassword":
            openRePasswordForm()
            break;
    }
}

// 刷新
const handleRefresh = () => location.reload()

function getClusters() {
    getClusterList().then(res => {
        // 响应成功，获取集群列表
        clusters.value = res
        // 将集群数量放到localstorage，方便其他地方使用
        setClusterNum(clusters.value.length)
        // 判断当前是否有选择某个集群，如果没有选择，则使用localstorage保存的集群
        if (!selectedKeys1.value.length) {
            selectedKeys1.value[0] = clusters.value[0]
            // 将当前选择的集群信息保存到cookie
            console.log("selectedKeys1 is null", clusters.value)
            setCluster(clusters.value[0])
        }
    }).catch(res => {
        console.log("getCluster error:", res)
        toast(res.msg, "error")
    })

    // store.dispatch("cluster").then(res=>{
    //         // 响应成功，获取集群列表
    //         clusters.value = res
    //         // 将集群数量放到localstorage，方便其他地方使用
    //         setClusterNum(clusters.value.length)
    //         if(!selectedKeys1.value.length){
    //             selectedKeys1.value[0] = clusters.value[0]
    //             // 将当前选择的集群信息保存到cookie
    //             setCluster(clusters.value[0])
    //         }

    //     }).catch(res => {
    //         toast(res.msg, "error")
    //     })
}

function clusterChange(val){
    if (selectedKeys1.value[0] == val){
        return
    }else {
        // 处理集群切换
        selectedKeys1.value[0] = val
        // 修改cookie中的集群
        setCluster(val)
        // 刷新当前页面，目的为了换集群后重新获取数据
        location.replace(router.currentRoute.value.path)
    }
}

onBeforeMount(() => {
    const clusterInfo = getCluster()
    if (clusterInfo){
        selectedKeys1.value[0] = clusterInfo
    }
    getClusters()
})

</script>
<style>
.f-header {
    @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
    z-index: 1000;
}

.logo {
    width: 250px;
    @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn {
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-600;
}

.f-header .dropdown {
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;
}
/* 自定义菜单项悬停时的背景色 */
.menu-item:hover {
  background-color: #e6f7ff; /* 设置悬停时的背景色为浅蓝色 */
}
</style>